<template>
    <view class="container">
        <button @click="chooseImage">选择图片</button>
        <button @click="getInfo">获取信息</button>
        <view class="img-box">
            <image class="img" src="../../static/ai.png" alt=""></image>
            <image class="img" :src="imageSrc" alt=""></image>
        </view>

    </view>
</template>

<script>
export default {
    data () {
        return {
            imageSrc: ''
        };
    },
    methods: {
        getInfo () {
            let arr = []
            uni.createSelectorQuery().selectAll(".img").boundingClienRect(res => {
                console.log({ res });
                arr = res;
            }).exec(() => {
                console.log({ arr })
            })
        },
        chooseImage () {
            const that = this;
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    const tempFilePath = res.tempFilePaths[0];
                    console.log({ res });
                    uni.compressImage({
                        src: tempFilePath, // 图片路径
                        quality: 1, // 压缩质量，范围0-100
                        success: function (compressImageRes) {
                            // /file/upload
                            console.log('压缩后的图片路径:', compressImageRes);
                            // 使用压缩后的图片路径
                            that.uploadImage(compressImageRes.tempFilePath)
                        },
                        fail: function (err) {
                            console.error('图片压缩失败:', err);
                        }
                    });
                }
            });
        },
        uploadImage (filePath) {
            const that = this;
            uni.uploadFile({
                url: 'http://localhost:9999/file/upload/images',  // 替换为你的上传地址
                filePath: filePath,
                name: 'file',
                success: (uploadFileRes) => {
                    console.log('上传成功', uploadFileRes);
                    that.imageSrc = filePath;
                },
                fail: (err) => {
                    console.error('上传失败', err);
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

button {
    padding: 10px 20px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 4px;
}

.img-box {
    // display: flex;
    // gap: 2px;
}
</style>